[レポート]What’s new for frontend web and mobile developers with AWS Amplify #reinvent

はじめに

「What’s new for frontend web and mobile developers with AWS Amplify」のセッションに参加してきたので、その内容についてお話ししていきたいと思います。

タイトルにもあるように、「AWS AmplifyによるフロントエンドのWebおよびモバイル開発者のための新機能」という内容のセッションでした。

アジェンダ

概要

AWS Amplify helps frontend web and mobile developers build full-stack applications in hours with minimal cloud expertise. In this session, explore the capabilities of Amplify, including how you can easily configure a backend with authentication, data, and storage; create a frontend UI with Amplify Studio; and host static and server-side rendered web apps with Amplify Hosting. Learn about recent Amplify updates, including Next.js support; Amplify Flutter support for web, desktop, and iOS/Android; and extensibility features that let you use the breadth of 175+ AWS services with AWS CDK and modify deployment operations as your needs evolve.
（直訳:
AWS Amplifyは、フロントエンドのWebおよびモバイル開発者が、最小限のクラウドの専門知識で数時間でフルスタックアプリケーションを構築することを支援します。このセッションでは、認証、データ、ストレージを含むバックエンドを簡単に構成し、Amplify StudioでフロントエンドUIを作成し、Amplify Hostingで静的およびサーバサイドレンダリングのWebアプリケーションをホストする方法を含む、Amplifyの機能を探ります。また、Next.jsのサポート、Web、デスクトップ、iOS/Android向けのAmplify Flutterのサポート、AWS CDKで175以上の幅広いAWSサービスを使用し、ニーズの進化に応じて導入作業を変更できる拡張性機能など、最近のAmplifyの更新について学びます。

アジェンダ

The state of the web and mobile development industry
What's AWS Amplify
Building fullstack web and cross-platform app
How customers are using Amplify
Underlying architecture
（直訳:
Web・モバイル開発業界の現状
AWS Amplifyとは
フルスタックウェブ、クロスプラットフォームアプリの構築
お客様によるAmplifyの活用方法
基本的なアーキテクチャ

内容（Web・モバイル開発業界の現状/AWS Amplifyとは）

NEWとして発表されていた内容は「※NEW」と表記しています。

フロントエンドの責任範囲とAWS Amplifyの概要

• 多くの責任を伴う
  • すぐに市場にリーチする
  • 素晴らしいユーザ体験を提供する
  • 差別化し、群衆に打ち勝つ機能を構築する

• Fullstack dvelopment
  • AWS Backendの構築
• Web
  • UIアプリの構築
  • アプリのホスト
• Cross Platform & Web
  • バックエンドへのコネクト

内容（フルスタックウェブ、クロスプラットフォームアプリの構築）

実際にAmplifyを利用して、デリバリーアプリを作成した程で、内容確認。

AWS Backendの構築

• コマンドラインとビジュアルリソースプロビジョニング
• 認証とファイル保存のユースケース利用
• データスキーマのモデル化と協力な権限ルールの追加

※コマンドやコンソール画面を開きながら進めていたので、詳しくは動画より

データのモデリング化

例で作成するアプリケーションのモデル定義例

Amplifyプロジェクトのイニシャライズ

ターミナルからコマンドを実行（amplify init）

バックエンドへのAPIと認証の追加

ターミナルからコマンドを実行（amplify add api）

データのモデリング

ソースの修正(graphql）

バックエンドへ変更内容をPUSH

ターミナルからコマンドを実行（amplify push）

GraphQL APIのテスト（※NEW）

Build an AWS backend: What's new

• GraphQL in Studio：自動生成されたGraphQL APIをクエリ実行
• リアルタイムデータ：サービスサイドのフィルタリングにより、「1/（特定のユーザー）またはグループ（コラボレーションアプリ）」にのみ更新を送信し、「2/データを選択的」に同期（ネットワークトラフィックとローカルストレージを最適化）
• アプリ内のメッセージ：定義されたユーザー・セグメントにターゲット・メッセージを送信したり、ユーザーの行動に基づいてコンテクスト・メッセージをトリガーなどを可能

UIアプリの構築

• FigmaのデザインからReactコンポーネントを生成する
• Studio Form Builder - NEW！
• 組み込みのUIコンポーネント

UIコンポーネントビルドイン

ログインコンポーネントの構築

FigmaからインポートされたUIコンポーネント

コンソール実行やコマンド実行

フォーム作成（※NEW）

Amplify Studio Form Builder

• あらゆるAPIに対応するフォーム
  • API定義からフォームを生成、またはゼロからフォームを新規作成
• 視覚的にデザインする
  • 共通の検証ルールを視覚的に設定することで、時間を節約可能
• コードで拡張する
  • 検証ルールとフォームのスタイルをコードでカスタマイズ

アプリのホスト（※NEW）

• SPA ウェブアプリのフルマネージドホスティングサービスに加え、ハイブリッド SSR アプリも提供開始
• ブランチに関連付けられた Git ベースの強力な C/CD 機能
  • Amplifyで作成したバックエンドのデプロイも可能
• React、Next.js、Angular、Vue、Gatsby、Hugo、Jekyllなど、最新のWebフレームワークをサポート

Fully managed hosting for server side rendered apps built with Next.js 13

• Next.jsのメリット 　- 静的レンダリングとサーバーレンダリングのハイブリッドで、インタラクティブ性と初期ロード時間の短縮の両方をサポートします。
• ゼロコンフィグデプロイメント 　- レポを接続するだけ。ブラウザとサーバーのコードにまたがる単一の開発者エクスペリエンス
• バックエンドとの統合 　- Auth や Data などの Amplify バックエンドとシームレスに動作します。
• Amazon CloudWatchの統合 　- SSRアプリの観察、監視、トラブルシューティング

バックエンドへのコネクト

• Amplifyがプロビジョニングした、または既存の AWSリソース
• ユースケース中心 APIサーフェス
• ウェブ、モバイル、クロスプラットフォームのフレームワークをサポート

認証

GraphQL APIのインテグレーション(※NEW）

Connect to an AWS backend: What's new

• Flutter
  • Dartを使用して書き直され、単一のDartベースのコードベースからモバイル、そして今やデスクトップとウェブアプリを作成
• iOS
  • Swiftを使って書き直され、単一のコードベースからiOS、そして現在ではmacOSのアプリを作成できるようになりました。構造化された並行処理を実装するために、async/awaitのようなSwiftの慣用的な機能をサポート
• アンドロイド
  • Kotlin を使用して書き直され、Storage と Auth が改善
• Authenticator UI コンポーネント
  • Flutter と React Native で使用

最終的なデモアプリ構成図

基本アーキテクチャ（Customer）

基本アーキテクチャ（Driver）

おまけ

会場に参加している人たちが「フロントエンド？バックエンド？etc」

• FullStackが多数